import './index_PC.scss';
import React, { useEffect, useState, useRef } from "react";
import { Dropdown, Radio, Space } from 'antd-mobile'
import { ArrowDownCircleOutline, DownOutline } from 'antd-mobile-icons'
import { chainsall, user_wallet_list, user_wallet_info } from '@/utils/mixin.ts'
import { Button, Checkbox, Form, Input, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import DropdownRef from 'antd-mobile/es/components/dropdown'

const EthBot = () => {

    return (
        <div className='bot'>
            <div className='header'>
                <Button type="text" className="goBackBtn" icon={<ArrowLeftOutlined />}></Button>
                <p className="title">VIP</p>
                <p className="expire-data">
                    <span className="expire">Expire</span>
                    <span className="expire-day">0/0</span>
                </p>
            </div>
            <div className='content'>
                <div className="levels">
                    <div className="vip">
                        <div class="up">
                            <div>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg" width="12" height="11" viewBox="0 0 12 11"
                                    fill="none">
                                    <path
                                        d="M5.04894 0.927049C5.3483 0.00573826 6.6517 0.00573993 6.95106 0.927051L7.5716 2.83688C7.70547 3.2489 8.08943 3.52786 8.52265 3.52786H10.5308C11.4995 3.52786 11.9023 4.76748 11.1186 5.33688L9.49395 6.51722C9.14347 6.77187 8.99681 7.22323 9.13068 7.63525L9.75122 9.54508C10.0506 10.4664 8.9961 11.2325 8.21238 10.6631L6.58778 9.48278C6.2373 9.22813 5.7627 9.22814 5.41221 9.48278L3.78761 10.6631C3.0039 11.2325 1.94942 10.4664 2.24878 9.54508L2.86932 7.63526C3.00319 7.22323 2.85653 6.77186 2.50604 6.51722L0.881445 5.33688C0.0977311 4.76748 0.500508 3.52786 1.46923 3.52786H3.47735C3.91057 3.52786 4.29453 3.2489 4.4284 2.83688L5.04894 0.927049Z"
                                        fill="#FA6944" />
                                </svg>
                                <span class="vip1 name">VIP</span>
                            </div>
                            <div class="day">
                                <span class="vip1 day">30</span>
                                <span data-lang="Days">/Day</span>
                            </div>
                        </div>
                        <div class="vip1 price msg">
                            100 USDT
                        </div>
                        <div class="spe">
                            <div class="bt buy-vip" data-lang="BUY" data-vip="1">BUY</div>
                        </div>
                    </div>
                    <div className="vip">
                        <div class="up">
                            <div>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg" width="12" height="11" viewBox="0 0 12 11"
                                    fill="none">
                                    <path
                                        d="M5.04894 0.927049C5.3483 0.00573826 6.6517 0.00573993 6.95106 0.927051L7.5716 2.83688C7.70547 3.2489 8.08943 3.52786 8.52265 3.52786H10.5308C11.4995 3.52786 11.9023 4.76748 11.1186 5.33688L9.49395 6.51722C9.14347 6.77187 8.99681 7.22323 9.13068 7.63525L9.75122 9.54508C10.0506 10.4664 8.9961 11.2325 8.21238 10.6631L6.58778 9.48278C6.2373 9.22813 5.7627 9.22814 5.41221 9.48278L3.78761 10.6631C3.0039 11.2325 1.94942 10.4664 2.24878 9.54508L2.86932 7.63526C3.00319 7.22323 2.85653 6.77186 2.50604 6.51722L0.881445 5.33688C0.0977311 4.76748 0.500508 3.52786 1.46923 3.52786H3.47735C3.91057 3.52786 4.29453 3.2489 4.4284 2.83688L5.04894 0.927049Z"
                                        fill="#FA6944" />
                                </svg>
                                <span class="vip1 name">VIP</span>
                            </div>
                            <div class="day">
                                <span class="vip1 day">30</span>
                                <span data-lang="Days">/Day</span>
                            </div>
                        </div>
                        <div class="vip1 price msg">
                            100 USDT
                        </div>
                        <div class="spe">
                            <div class="bt buy-vip" data-lang="BUY" data-vip="1">BUY</div>
                        </div>
                    </div>
                    <div className="vip">
                        <div class="up">
                            <div>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg" width="12" height="11" viewBox="0 0 12 11"
                                    fill="none">
                                    <path
                                        d="M5.04894 0.927049C5.3483 0.00573826 6.6517 0.00573993 6.95106 0.927051L7.5716 2.83688C7.70547 3.2489 8.08943 3.52786 8.52265 3.52786H10.5308C11.4995 3.52786 11.9023 4.76748 11.1186 5.33688L9.49395 6.51722C9.14347 6.77187 8.99681 7.22323 9.13068 7.63525L9.75122 9.54508C10.0506 10.4664 8.9961 11.2325 8.21238 10.6631L6.58778 9.48278C6.2373 9.22813 5.7627 9.22814 5.41221 9.48278L3.78761 10.6631C3.0039 11.2325 1.94942 10.4664 2.24878 9.54508L2.86932 7.63526C3.00319 7.22323 2.85653 6.77186 2.50604 6.51722L0.881445 5.33688C0.0977311 4.76748 0.500508 3.52786 1.46923 3.52786H3.47735C3.91057 3.52786 4.29453 3.2489 4.4284 2.83688L5.04894 0.927049Z"
                                        fill="#FA6944" />
                                </svg>
                                <span class="vip1 name">VIP</span>
                            </div>
                            <div class="day">
                                <span class="vip1 day">30</span>
                                <span data-lang="Days">/Day</span>
                            </div>
                        </div>
                        <div class="vip1 price msg">
                            100 USDT
                        </div>
                        <div class="spe">
                            <div class="bt buy-vip" data-lang="BUY" data-vip="1">BUY</div>
                        </div>
                    </div>
                </div>
                <div class="bind">
                    <h2>Bind a referral code</h2>
                    <span class="community">Community</span>
                </div>
                <div class="searchInput">
                    <Input
                        placeholder="Referral code"
                        suffix={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path
                                fill-rule="evenodd" clip-rule="evenodd"
                                d="M7.69466 11.3467C7.30413 10.9562 6.67097 10.9562 6.28044 11.3467L5.14188 12.4853C3.20075 14.4264 3.20075 17.5736 5.14188 19.5147C7.08301 21.4559 10.2302 21.4559 12.1713 19.5147L13.3099 18.3762C13.7004 17.9856 13.7004 17.3525 13.3099 16.9619C12.9194 16.5714 12.2862 16.5714 11.8957 16.9619L10.7571 18.1005C9.59703 19.2606 7.71617 19.2606 6.55609 18.1005C5.39602 16.9404 5.39602 15.0596 6.55609 13.8995L7.69466 12.7609C8.08518 12.3704 8.08518 11.7372 7.69466 11.3467ZM16.8246 13.4472C16.4341 13.0567 16.4341 12.4235 16.8246 12.033L17.7865 11.0711C18.9466 9.911 18.9466 8.03014 17.7865 6.87006C16.6265 5.70998 14.7456 5.70998 13.5855 6.87006L12.6236 7.832C12.2331 8.22253 11.5999 8.22252 11.2094 7.832C10.8189 7.44148 10.8189 6.80831 11.2094 6.41779L12.1713 5.45584C14.1124 3.51472 17.2596 3.51472 19.2008 5.45584C21.1419 7.39697 21.1419 10.5442 19.2008 12.4853L18.2388 13.4472C17.8483 13.8378 17.2151 13.8378 16.8246 13.4472Z"
                                fill="#FA6944" />
                            <path d="M15 10L10 15" stroke="#FA6944" stroke-width="2" stroke-linecap="round" />
                        </svg>}
                    />
                </div>
                <div class="referral">
                    <h2 class="ReferralCode">Referral code</h2>
                    <span class="copy-code" id="copyCode" data-clipboard-target="#inviteCode">
                        <span class="invite_code" id="inviteCode">8888Z2</span>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="17"
                            height="17" viewBox="0 0 17 17" fill="none">
                            <path
                                d="M12.0415 4.25H2.12484C1.73364 4.25 1.4165 4.50371 1.4165 4.81667V15.0167C1.4165 15.3296 1.73364 15.5833 2.12484 15.5833H12.0415C12.4327 15.5833 12.7498 15.3296 12.7498 15.0167V4.81667C12.7498 4.50371 12.4327 4.25 12.0415 4.25Z"
                                stroke="#999999" stroke-linejoin="round" />
                            <path
                                fill-rule="evenodd" clip-rule="evenodd"
                                d="M4.74755 1.997C4.74746 1.99699 4.74769 1.99623 4.74856 1.99478C4.74808 1.9963 4.74765 1.99702 4.74755 1.997ZM4.76981 1.97306C4.75871 1.98195 4.75287 1.9886 4.75 1.9926V3.54166H3.75V1.98332C3.75 1.29587 4.40087 0.916656 4.95833 0.916656H14.875C15.4325 0.916656 16.0833 1.29587 16.0833 1.98332V12.1833C16.0833 12.8708 15.4325 13.25 14.875 13.25H13.4583V12.25H14.875C14.965 12.25 15.03 12.2204 15.0635 12.1936C15.0746 12.1847 15.0805 12.178 15.0833 12.174V1.9926C15.0805 1.9886 15.0746 1.98195 15.0635 1.97306C15.03 1.94626 14.965 1.91666 14.875 1.91666H4.95833C4.86831 1.91666 4.80332 1.94626 4.76981 1.97306ZM15.0848 12.1719C15.0856 12.1704 15.0859 12.1697 15.0858 12.1696C15.0857 12.1696 15.0856 12.1698 15.0854 12.1703C15.0852 12.1706 15.085 12.1712 15.0848 12.1719ZM15.0858 1.997C15.0857 1.99702 15.0852 1.9963 15.0848 1.99478C15.0856 1.99623 15.0859 1.99699 15.0858 1.997Z"
                                fill="#999999" />
                        </svg>
                    </span>
                </div>
            </div>
        </div>
    );
};

export default EthBot;
